<!-- TODO: replace the contents of this file with your own html -->
<div id="main-view">
    <div class="palm-body-text">
        <div id="scores">
            <div id="divTimer">
                <span class="label">Timer:</span>
                <span id="cTimer" style="padding:0 10px">Timer</span>
            </div>
            <div id="divRound">
                <span class="label">Round:</span>
                <span id="qNumber" style="padding:0 0 0 10px">Round</span>
            </div>
        </div>
        <div class="palm-list">
            <div id="StaffContainer" class="palm-row">
                <div class="palm-row-wrapper" style="margin:auto;width:290px">
                    <canvas id="music" style="border: solid 1px;background-color:white;" width="290" height="300">
                    </canvas>
                    <audio id="noteSound">
                    </audio>
                </div>
            </div>
            <div id="AudioContainer" class="palm-row" style="display:none">
                <div class="palm-row-wrapper">
                    <div style="height:100px">
                        &nbsp;
                    </div>
                    <div x-mojo-element="Button" id="AudioControl">
                        Play Again
                    </div>
                    <div style="height:100px">
                        &nbsp;
                    </div>
                </div>
            </div>
            <div class="palm-row last">
                <div class="palm-row-wrapper">
                    <div id="choiceSharpLabel" class="label">
                        sharp
                    </div>
                    <div x-mojo-element="CheckBox" id="choiceSharp">
                        &nbsp;
                    </div>
                    <div x-mojo-element="RadioButton" id="choiceButtons">
                        There
                    </div>
					
                </div>
 
            </div>
        </div>
    </div>
</div>

 <div id="keybd" style="display:none;">
                    <div class="clear">
                        <div class="wt w14 l" id="kt0" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="bl" id="kt1" style="background-color: rgb(0, 0, 0); ">
                        </div >
                        <div class="wt w12" id="kt2"  style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="bl" id="kt3"  style="background-color: rgb(0, 0, 0); ">
                        </div >
                        <div class="wt w14" id="kt4" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wt w14 l" id="kt5" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="bl" id="kt6" style="background-color: rgb(0, 0, 0); ">
                        </div >
                        <div class="wt w12" id="kt7" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="bl" id="kt8" style="background-color: rgb(0, 0, 0); ">
                        </div >
                        <div class="wt w12" id="kt9" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="bl" id="kt10" style="background-color: rgb(0, 0, 0); ">
                        </div >
                        <div class="wt w14" id="kt11" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wt w14 l" id="kt12" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="bl" id="kt13" style="background-color: rgb(0, 0, 0); ">
                        </div >
                        <div class="wt w12" id="kt14" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="bl" id="kt15" style="background-color: rgb(0, 0, 0); ">
                        </div >
                        <div class="wt w14" id="kt16" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wt w14 l" id="kt17" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="bl" id="kt18" style="background-color: rgb(0, 0, 0); ">
                        </div >
                        <div class="wt w12" id="kt19" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="bl" id="kt20" style="background-color: rgb(0, 0, 0); ">
                        </div >
                        <div class="wt w12" id="kt21" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="bl" id="kt22" style="background-color: rgb(0, 0, 0); ">
                        </div >
                       <div class="wt w14"></div >
                        <div class="lr1" id="kt36">
                        </div >
                    </div >
                    <div class="clear">
                        <div class="wb w20" id="kb0" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wb w23" id="kb2" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wb w19" id="kb4" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wb w20" id="kb5" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wb w23" id="kb7" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wb w23" id="kb9" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wb w19" id="kb11" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wb w20" id="kb12" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wb w23" id="kb14" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wb w19" id="kb16" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wb w20" id="kb17" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wb w23" id="kb19" style="background-color: rgb(255, 255, 255); ">
                        </div >
                        <div class="wb w23" id="kb21" style="background-color: rgb(255, 255, 255); ">
                        </div >
						<div class="wb w19" id="kb23" style="background-color: rgb(255, 255, 255); "></div >
                        <div class="lr2" id="kb36">
                        </div >
                    </div >
                </div >

<div class="clear" id="tappedKey">
	</div >

